<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 让box动起来 
        var boxEle = document.querySelector(".box");
        var arrow = "right";
        setInterval(function () {
            
            // 重复执行的函数代码 ，让 boxEle的left 或者top值累加 ；
            // 获取当前box的left值 
            // var num = boxEle.style.left;
            switch (arrow) {
                case 'right':
                    // var num = parseInt(getComputedStyle(boxEle)["left"]);
                    // var res = num + 5;
                    // boxEle.style["left"] = res + "px";
                    fn("left",true);
                    break;
                case 'left':
                    // var num = parseInt(getComputedStyle(boxEle)['left']);
                    // var res = num - 5;
                    // boxEle.style.left = res + "px";
                    fn("left",false);

                    break;
                case 'up':
                    // var num = parseInt(getComputedStyle(boxEle)['top']);
                    // var res = num - 5;
                    // boxEle.style.top = res + "px";
                    fn("top",false);

                    break;
                case 'down':
                    // var num = parseInt(getComputedStyle(boxEle)['top']);
                    // var res = num + 5;
                    // boxEle.style.top = res + "px";
                    fn("top",true);

                    break;
                default:
                    console.log("按键不正确");
                    break;
            }

            // console.log(num);
            // console.log(res);
            // 把加了 10px的值重新赋值给 box
        }, 100);

        function fn(dis,type){
            // console.log(11);
            var num = parseInt(getComputedStyle(boxEle)[dis]);
            var res = num + 5*(type?1:-1);
            // console.log(res);
            boxEle.style[dis] = res + "px";
        }


        document.onkeydown = function (e) {
            var key = e.key;
            console.log(key);
            // 把上下左右按键区分开 ；
            switch (key) {
                case 'ArrowUp':
                    arrow = "up";
                    break;
                case 'ArrowDown':
                    arrow = "down";
                    break;
                case 'ArrowLeft':
                    arrow = "left";
                    break;
                case 'ArrowRight':
                    arrow = "right";
                    break;
                default:
                    console.log("按键不正确");
                    break;
            }
        }

    </script>
</body>

</html>